import {Component, OnInit, Input, Output, OnDestroy, EventEmitter, OnChanges, ViewChild, ElementRef, SimpleChange, Renderer2} from '@angular/core';
import {Farm} from '../../../../entity/farm.model';
import {DataSourceService} from '../../../../service/data-source/data-source.service';
import {TagData} from '../../../../entity/tag-data.model';
import {DatePipe} from '@angular/common';
import {HttpClient} from '@angular/common/http';
import {ApplicationService} from '../../../../service/application.service';
import {LimitedFarmData} from '../wind-energy.component';

@Component({
  selector: 'app-wind-energy-map',
  templateUrl: './wind-energy-map.component.html',
  styleUrls: ['./wind-energy-map.component.css']
})
export class WindEnergyMapComponent implements OnInit {
  @Input() farms: LimitedFarmData[] = [];
  @Output() farmChange = new EventEmitter<number>();
  /* farmData: FarmData[]; */
  active: number = null;
  @ViewChild('map', {static: true})
  map: ElementRef;
  zoom = 1;
  offsetX = 0;
  offsetY = 0;
  mCenterX = 0;
  mCenterY = 0;
  isShowImg: boolean = false;
  centerName: '集控中心';

  constructor(
    private application: ApplicationService,
    private dataSource: DataSourceService,
    private datePipe: DatePipe,
    private http: HttpClient,
    private renderer: Renderer2
  ) {
  }

  // tslint:disable-next-line:use-life-cycle-interface
  public ngOnDestroy(): void {
    this.dataSource.dispose();
  }

  ngOnInit() {
    let mapUrl = 'url(' + './assets/images/' + this.application.appConfigData.appCompany + '.png' + ') no-repeat center';
    this.renderer.setStyle(this.map.nativeElement, 'background', mapUrl);
    this.renderer.setStyle(this.map.nativeElement, 'background-size', 'auto 100%');
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['farmZoom']) {
      const num = Number(this.application.currentApplicationParams['farmZoom'].paramValue);
      this.zoom = (num > 1 || num < 0) ? 1 : num;
    }
    if (this.application.currentMenuParams && this.application.currentMenuParams['offsetX']) {
      const num = Number(this.application.currentMenuParams['offsetX'].paramValue);
      this.offsetX = num;
    }
    if (this.application.currentMenuParams && this.application.currentMenuParams['offsetY']) {
      const num = Number(this.application.currentMenuParams['offsetY'].paramValue);
      this.offsetY = num;
    }
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['isShowMCenter']) {
      const num = Number(this.application.currentApplicationParams['isShowMCenter'].paramValue);
      this.isShowImg = num === 1 ? true : false;
    }
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['mCenterPos']) {
      const mCenterPos = this.application.currentApplicationParams['mCenterPos'].paramValue;
      const arr = mCenterPos.split(';');
      this.mCenterX = Number(arr[0]);
      this.mCenterY = Number(arr[1]);
    }
  }

  onHeaderClick(farmData: LimitedFarmData, index: number) {
    if (this.active === index) {
      this.active = null;
    } else {
      this.active = index;
    }
    this.farmChange.emit(this.active);
  }
}

/* interface FarmData {
  farmName: string,
  windDirection?: TagData,
  temperature?: TagData,
  windSpeed?: TagData,
  posx?: number,
  posy?: number
} */


// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/wind-energy-map/wind-energy-map.component.ts
